<template>
	<div class="part">
		<header class="pa-header">
			<div class="pa-t">
				<router-link tag="span" to="/" class="iconfont pa-tl">
					&#xe627;
				</router-link>
				<span class="iconfont pa-tr">
					&#xe60c;
				</span>
			</div>
			<div class="pa-c">
				<div class="pc-tu">
					<img src="https://fuss10.elemecdn.com/7/b1/56a13d655f5a09b28e5bdfd2a5362jpeg.jpeg?imageMogr/format/webp/thumbnail/!130x130r/gravity/Center/crop/130x130/">
				</div>
				<div class="pc-ri">
					<div class="pc-title">
						丽华快餐（王府井店）
					</div>
					<div class="pc-con">
						<span>商家配送 / </span>
						<span>39分钟送达 / </span>
						<span> 配送费¥6</span>
					</div>
					<div class="pc-ted">
						<span class="pc-g">
							公告：
						</span>
						<span class="pc-ca">
							北京市五环内一份起送，不含南四环外部分区域，具体区域可拨打订餐电话010-67781234咨询，五环外通州，石景山，亦庄区域属于配送范围。送餐时间：四环内半小时送达，四环至五环之间四十五分钟送达，五环外不承诺送餐时间
						</span>
					</div>
				</div>
			</div>
			<div @click="sh" class="pa-b">
				<span>
					首
				</span>
				<span>
					新用户下单立减17元(不与其它活动同享)
				</span>
				<span>4个活动</span>
			</div>
		</header>
		<main class="pa-main">
			<ul class="nav">
				<router-link tag="li" :class="v.class" v-for="(v,i) in lista" :key="i" :to="v.path"><span>{{v.name}}</span></router-link>
			</ul>
		<router-view/>
		</main>
		<div v-show="show" class="pa-hd">
			<h3>和合谷(东城区王府井书店店)</h3>
			<div class="pa-tu">
				<img src="../../static/images/xing2.png">
			</div>
			<div class="youh">
				<p class="y-top">
					<span></span>
					<span>优惠信息</span>
					<span></span>
				</p>
				<p class="y-bottom">
					<span>首</span>
					<span>新用户立减17元(不与其他活动共享)</span>
				</p>
			</div>
			<div class="youh">
				<p class="y-top">
					<span></span>
					<span>优惠信息</span>
					<span></span>
				</p>
				<p class="y-bottom">
					尊敬的客户您好，请您提前下单，由于午高峰期间订单量较多，配送小哥会紧锣密布赶赴 ，如遇延迟请您耐心等待
				</p>
			</div>
			<div @click="zi" class="del iconfont">
				&#xe53b;
			</div>
		</div>
	</div>
</template>

<script>
export default {
	data() {
		return {
			lista: [
				{
					name:"商品",
					path:"/sp",
					class:'li'
				},
				{
					name:"评价",
					path:"/pj",
					class:''
				},
				{
					name:"店铺",
					path:"/dp",
					class:''
				}
			],
			show:false,
		}
	},
	methods: {
		cl(e) {
			// this.lista[0].class='';
			// var lis=document.querySelectorAll('li');
			// for(var i=0,len=lis.length;i<len;i++){
			// 	this.lista[i].class='li';
			// }
		},
		sh() {
			this.show=true
		},
		zi() {
			this.show=false
		}
	}
}
</script>
 
<style scoped lang='less'>
.pxToRem(@p,@px){
    @{p}: @px / 75 * 1rem;
}
.part{
	.pa-header{
		width: 100%;
		background: url(https://fuss10.elemecdn.com/1/32/c75a72f674052473fb35b5c8ab1d7jpeg.jpeg?imageMogr/format/webp/thumbnail/!40p/blur/50x40/)no-repeat;
		background-size:100%; 
		padding: 0 2%;
		box-sizing: border-box;
		.pa-t{
			display: flex;
			justify-content:space-between;
			.pxToRem(padding-top,10);
			.pxToRem(margin-bottom,8);
			.pxToRem(height,55);
			span{
				.pxToRem(width,55);
				.pxToRem(height,55);
				.pxToRem(line-heiht,55);
				.pxToRem(font-size,45);
				color: #fff;
				text-align: center;
			}
		}
		.pa-c{
			width: 100%;
			.pxToRem(padding-top,20);
			display: flex;

			.pc-tu{
				.pxToRem(width,130);
				.pxToRem(height,130);
				.pxToRem(border-radius,4);
				border:1px solid #ccc;
				.pxToRem(margin-right,20);
				img{
					width: 100%;
				}
			}
			.pc-ri{
				flex:1;
				.pc-title{
					.pxToRem(height,42);
					color: #fff;
					.pxToRem(font-size,35);
					font-weight: bold;
				}
				.pc-con{
					width: 100%;
					.pxToRem(height,50);
					.pxToRem(line-height,50);
					display: flex;
					color: #fff;
					.pxToRem(font-size,24);
					span{
						.pxToRem(margin-right,10);
					}
				}
				.pc-ted{
					width: 100%;
					.pxToRem(height,40);
					.pxToRem(line-height,40);
					display: flex;
					color: #fff;
					.pxToRem(font-size,24);
					.pc-g{
						.pxToRem(font-size,26);
						.pxToRem(margin-right,10);
					}
					.pc-ca{
						flex:1;
				        overflow: hidden;
				        text-overflow: ellipsis;
					}
				}
			}
		}
		.pa-b{
			width: 100%;
			color: #fff;
			display: flex;
			align-items:center;
			.pxToRem(height,50);
			.pxToRem(font-size,24);
			span{
				&:nth-child(1){
					text-align: center;
					background: #70bc46;
					.pxToRem(border-radius,4);
					.pxToRem(margin-right,10);
					.pxToRem(padding,2);
				}
				&:nth-child(2){
					flex:1;
					text-align: left;
					.pxToRem(padding,2);
				}
				&:nth-child(3){
					position: relative;
					text-align: left;
					.pxToRem(padding,2);
					.pxToRem(margin-right,10);
					&:after{
						content: "";
						position: absolute;
						top:50%;
						right: -15%;
						border-left:5px solid transparent;
						border-right:5px solid transparent;
						border-bottom:5px solid #fff;
						transform:rotate(90deg); 
					}
				}
			}
		}
	}
	.pa-main{
		width: 100%;
		height: 100vh;
		.nav{
			width: 100%;
			display: flex;
			background: #fff;
			height:6vh;
			border-bottom: 1px solid #ccc;
			li{
				flex:1;
				display: flex;
				align-items:center;
				justify-content:center;
				span{
					box-sizing: border-box;
					.pxToRem(font-size,22);
				}
			}
			.li{
				span{
					color: #3190e8;
					font-weight: bold;
					border-bottom:1px solid #3190e8;
					.pxToRem(border-bottom-width,4);
				}
			}
		}
	}
	.pa-hd{
		position: fixed;
		top:0;
		bottom: 0;
		background: #262626;
		z-index: 10;
		color: #fff;
		width: 100%;
		box-sizing: border-box;
		.pxToRem(padding,40);
		h3{
			.pxToRem(font-size,43);
			text-align: center;
			.pxToRem(margin-top,20);
		}
		.pa-tu{
			.pxToRem(margin-top,20);
			text-align: center;
			img{
				.pxToRem(width,200);
			}
		}
		.youh{
			.pxToRem(margin-top,40);
			.y-top{
				.pxToRem(margin-bottom,40);
				.pxToRem(font-size,24);
				display: flex;
				align-items:center;
				span{
					&:last-child,&:first-child{
						flex:1;
						.pxToRem(height,1);
						background: #555;
					}
					&:nth-child(2){
						.pxToRem(padding,10);
						.pxToRem(padding-left,20);
						.pxToRem(padding-right,20);
						border:1px solid #555;
						.pxToRem(border-radius,50);
					}
				}
			}
			.y-bottom{
				.pxToRem(line-height,30);
				span{
					&:first-child{
						display:inline-block;
						.pxToRem(padding,2);
						background: #70bc46;
						.pxToRem(border-radius,4);
					}
				}
				
			}
		}
		.del{
			.pxToRem(font-size,80);
			position: absolute;
			.pxToRem(bottom,40);
			left:50%;
			transform:translateX(-50%);
			border-radius: 50%;
			overflow: hidden;
		}
	}
}
</style>
